<template>
  <div id="">
    <img class="img" :src="elem" @click="imgClick(elem, index)" v-for="(elem, index) in imgList" :key="elem.key" alt="">

    <div v-if="showPreImgView" @touchmove.prevent>
      <PreImageView
        class="preImageView"
        v-if="showPreImgView"
        :currentIndex="currentIndex"
        @innerImgClick="innerImgClick"
        :imgList="imgList">
      </PreImageView>
    </div>
  </div>
</template>
<script>
import PreImageView from '@/components/PreImageView';

export default {
  name: "Test",
  components: {
    PreImageView
  },
  data() {
    return {
      imgList: ["http://pic.58pic.com/58pic/15/17/81/81u58PICpA7_1024.jpg",
      "http://img.taopic.com/uploads/allimg/140724/235063-140H40T53817.jpg",
      "http://img.taopic.com/uploads/allimg/140507/240381-14050H2025093.jpg",
      "http://img04.tooopen.com/images/20131017/sy_42787413252.jpg"],
      currentIndex: 0,
      showPreImgView: false, // 控制图片预览是否显示
    }
  },
  methods: {
    imgClick(elem, index) { // 点击图片查看大图
      this.currentIndex = index;
      this.showPreImgView = true;
    },
    innerImgClick() { // 点击预览图关闭预览
      this.showPreImgView = false;
    }
  }
}
</script>
<style lang="css" scoped>

.img {
  width: 150px;
  height: 100px;
}

.preImageView {
  /* 查看大图背景色 */
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

</style>
